<template>
  <el-dialog :model-value="dialogVisible" :title="dialogDatas.title" :destroy-on-close="true" @close="closeDialog">
    <div>
      <el-form style="height:400px;overflow: auto;" ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :disabled="dialogDatas?.type == 'check'">
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="ruleForm.phone" placeholder="请输入手机号码" clearable maxlength="11" />
        </el-form-item>
        <el-form-item label="用户姓名" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入用户姓名" clearable maxlength="10" />
        </el-form-item>
        <el-form-item label="归属组织机构" prop="orgId">
          <el-select v-model="ruleForm.orgId" class="w-full" placeholder="请选择归属组织机构" @change="changeOrgId" v-if="showOrg">
            <el-option v-for="(item) in orgIdDatas" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="归属健康顾问" prop="healthDoctorId">
          <el-select v-model="ruleForm.healthDoctorId" class="w-full" placeholder="请选择归属健康顾问" v-if="showOrgs">
            <el-option v-for="(item) in jkgwOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="ruleForm.gender" class="w-full" placeholder="请选择性别">
            <el-option v-for="(item) in genderDatas" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker
            prop="item.value"
            v-model="ruleForm.birthday"
            type="date"
            placeholder="请选择出生日期"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="身高（CM）" prop="height">
          <el-input-number
            v-model="ruleForm.height"
            step="10"
            max="300"
            min="0"
          />
        </el-form-item>
        <el-form-item label="体重（kg）" prop="weight">
          <el-input-number
            v-model="ruleForm.weight"
            step="10"
            max="300"
            min="0"
          />
        </el-form-item>
        
      </el-form>
    </div>
    <template #footer v-if="!(dialogDatas?.type == 'check')">
      <span class="dialog-footer" style="display: block;text-align: center;">
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="confirm(ruleFormRef)">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, onBeforeMount, toRefs } from 'vue';
import {  orgOptionsRequest,healthDoctorOptionsRequest } from '@/api/common';
import { userAddUserRequest } from '@/api/user/index';
import type { FormInstance, FormRules } from 'element-plus';
const emit = defineEmits(['updateList', 'changeCheck', 'update:dialogVisible']);
const visible = ref(false);
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  dialogDatas: {
    type: Object,
    default: () => { }
  }
});
const { dialogVisible, dialogDatas } = toRefs(props);
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  name: null,
  phone: '',
  orgId: '',
  healthDoctorId: '',
  gender: '',
  birthday: '',
  height: '',
  weight: ''
})
let genderDatas = reactive([{ id: '1', name: '男' },
      { id: '2', name: '女' },]); //性别下拉数据
// 校验
const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入用户姓名', trigger: 'change' }],
  phone: [{ required: true, message: '请输入手机号', trigger: 'change' }],
  orgId: [{ required: true, message: '选择归属组织机构', trigger: 'change' }],
  healthDoctorId: [{ required: true, message: '选择归属健康顾问', trigger: 'change' }],
  gender: [{ required: true, message: '选择性别', trigger: 'change' }],
  birthday: [{ required: true, message: '选择出生日期', trigger: 'change' }],
  height: [{ required: true, message: '选择输入身高', trigger: 'change' }],
  weight: [{ required: true, message: '选择输入体重', trigger: 'change' }],
})
let jkgwOptions = reactive([]); //健康顾问下拉数据
let showOrgs = ref(true)
//  组织机构变化-》获取归属枚举值
const changeOrgId = async () => {
  showOrgs.value = false
  ruleForm.healthDoctorId = '';
  const data: any = await healthDoctorOptionsRequest({ orgId: ruleForm.orgId });
  jkgwOptions = data.data;
  showOrgs.value = true
}


//提交
const confirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      // let Url = dialogDatas.value.type == 'add' ? userAddUserRequest : editDeviceRequest;
      let res: any = await userAddUserRequest(ruleForm);
      if (res.code === 2000) {
        ElMessage.success('保存成功')
        emit("update:dialogVisible", false);
      } else {
        ElMessage.error(res.message)
      }
      formEl.resetFields()//重置
      emit('updateList')
    } else {
      console.log('保存失败', fields)
    }
  })
}
// 取消&重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  visible.value = false
  emit('updateList')
  emit("update:dialogVisible", false);
}
// 关闭
const closeDialog = () => {
  emit('updateList')
}
// 归属机构下拉
let orgIdDatas = reactive([])
let showOrg = ref(true)
const getOrgOptionsDatas = async () => {
  showOrg.value = false
  const data: any = await orgOptionsRequest({ containBase: false });
  orgIdDatas = data.data;
  showOrg.value = true
};

// 获取详情
const getDetailsFun = async () => {
  // const data: any = await getDeviceByIdRequest({ deviceId: Number(dialogDatas.value.datas.deviceId),id: dialogDatas.value.datas.id });
  // let res = data.data
  showOrgs.value = false
  const checkPoints: any = await healthDoctorOptionsRequest({ orgId: ruleForm.orgId }); //根据组织id查询检测点下拉数据
  jkgwOptions = checkPoints.data;
  showOrgs.value = true
  // ruleForm.name = res.name
  // ruleForm.phone = res.phone
  // ruleForm.orgId = res.orgId
  // ruleForm.healthDoctorId = res.healthDoctorId
  // ruleForm.gender = res.gender
  // ruleForm.birthday = res.birthday
  // ruleForm.height = res.height
  // ruleForm.weight = res.weight
}

onBeforeMount(async () => {
   getOrgOptionsDatas()
  if (dialogDatas.value.type == 'add') {
    // getMenuList()
  } else {
    getDetailsFun()
  }
})
</script>

<style lang="scss" scoped>
.el-dialog__footer{
  text-align: center;
}
</style>
